<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    
    <title>招聘风云榜</title>
</head>
<body >
       
  <div class="container-fluid">
      <div class="row" style="margin-bottom:8px; margin-top:5px;height:100px">
            <form id="form1" class="form-inline" action="$!{__beat.server.contextPath}/zhishu/zhaopin/fengyunbang" method="post">
                 <div class="col-md-12" style="height:30px">
                 </div>
                 <div class="form-group" >
                      <label for="cityName" style="padding-left:60px">一级城市（归属）：</label>
              
                      <select id="city" name="city" class="form-control input-sm" style="align:center; width:100px; ">
                          <option value="全国" selected="">全国</option>
                          #foreach($!{p} in ${CityList})
                                #if($p ==$city)
                                    <option value="$!{p}" selected="">$!{p}</option>
                                #end
                                #if($p !=$city)
	                                <option value="$!{p}">$!{p}</option>                      
                                #end
                          #end                                 
                     </select>
                 </div>
                 
                 <div class="form-group" style="">
                      <label for="cateName" style="padding-left:15px">二级类别（归属）：</label>
                      <select id="cate" name="cate" class="form-control input-sm" style="align:center; width:150px; ">                         
                          #foreach($!{p} in ${CateList})
                                #if($p ==$cate)
                                    <option value="$!{p}" selected="">$!{p}</option>
                                #end
                                #if($p !=$cate)
	                                <option value="$!{p}">$!{p}</option>                      
                                #end
                          #end                                 
                     </select>
                 </div>
                 
                 <div class="form-group" style="width:180px">
                      <label for="cityName" style="padding-left:15px">时 间：</label>
                      <select id="months" name="months" class="form-control input-sm" style="align:center; width:100px; ">
                          #if($months == 1)
                             <option value="1" selected="">一个月内</option>
                             <option value="3" >三个月内</option>
                          #end
                          #if($months == 3)
                             <option value="1" >一个月内</option>
                             <option value="3" selected="">三个月内</option>   
                          #end                           
                     </select>
                 </div>
                 <div class="form-group" style="padding-left:30px">                                          
                      <button id="searchBtn" class="btn btn-primary btn-ms" type="button" >查询</button>
                      
                 </div>
            </form>
      </div>
      <div class="row">
	      <div class="col-md-4">
	          <h4 id="salary" class="heading" style="text-align:center">薪水最高的职位（$city）</h4>
	           <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center">排 名</th>
                        <th style="text-align:center">职位名称</th>
                        <th style="text-align:center">平均月薪（元）</th>
                    </thead>
                                    
                    <tbody id="salaryTable" role="alert" aria-live="polite" aria-relevant="all">
                        #foreach($avgSalary in $zhaopin.get("avg"))
                             #if($avgSalary.rank == "11")
                                    return
                            #end
                            #if($zhaopin.get("city")=="quanguo")
                                <tr>
                            #end
                            #if($zhaopin.get("city")!="quanguo")
                                <tr onclick=goPage('$zhaopin.get("city").58.com/$avgSalary.belong_cate_namelist/')>
                            #end
                            
                                
                                 <td>$avgSalary.rank</td>
                                 <td style="font-weight:600;color:blue">$avgSalary.belong_cate3_name</td>
                                 <td>$avgSalary.salary</td>
                            </tr>
                        #end                                             
                        
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	         
	      </div>
	      
	      <div class="col-md-4">
	          <h4 id="zprs" class="heading" style="text-align:center">招聘人数最多的职位（$city）</h4>
	          <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center">排 名</th>
                        <th style="text-align:center">职位名称</th>
                        <th style="text-align:center">日均招聘人数</th>
                    </thead>
                                    
                    <tbody id="zhaopinTable" role="alert" aria-live="polite" aria-relevant="all">
                        #foreach($zprs in $zhaopin.get("zprs"))
                                 #if($zprs.rank== "11")
                                    return
                                 #end
		                            #if($zhaopin.get("city")=="quanguo")
		                                <tr>
		                            #end
		                            #if($zhaopin.get("city")!="quanguo")
		                                <tr onclick=goPage('$zhaopin.get("city").58.com/$zprs.belong_cate_namelist/')>
		                            #end
                                 <td>$zprs.rank</td>
                                 <td style="font-weight:600;color:blue">$zprs.belong_cate3_name</td>
                                 <td>$zprs.zprs</td>
                            </tr>
                        #end  
                        
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	      </div>
	      <div class="col-md-4">
	          <h4 id="need" class="heading" style="text-align:center">需求增长最快的职位（$city）</h4>
	          <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center">排 名</th>
                        <th style="text-align:center">职位名称</th>
                        <th style="text-align:center">需求增长率</th>
                    </thead>
                                    
                    <tbody id="needTable" role="alert" aria-live="polite" aria-relevant="all">
                        #foreach($increases in $zhaopin.get("increases"))
                             #if($increases.rank =="11")
                                 return
                            #end
                            #if($zhaopin.get("city")=="quanguo")
                                <tr>
                            #end
                            #if($zhaopin.get("city")!="quanguo")
                                <tr onclick=goPage('$zhaopin.get("city").58.com/$increases.belong_cate_namelist/')>
                            #end
                            
                                 <td>$increases.rank</td>
                                 <td style="font-weight:600;color:blue">$increases.belong_cate3_name</td>
                                 <td>$increases.zprs</td>
                            </tr>
                        #end  
                        
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	      </div>
      </div>
  </div>          			
		
  
   
   
     
</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>

<link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.css" type="text/css" /> 
<link type="text/css" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.css" rel="stylesheet" />
<script src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.js"></script>


<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/source/echarts.js"></script>
<!-- <script src="$!{__beat.server.contextPath}/js/wnl.js"></script> -->
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">
    

    var charts = []; 

    var businessName="fangchan";
    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/zhishuzhaopin"}});
    require(['dashboard/fengyunbang_v1'],function(heatCityEC){
       // charts.push(heatCityEC);
        //heatCityEC.show(businessName);
    });
    
    //格式化数字
   formatNumber("#salaryTable tr",1);
    formatNumber("#zhaopinTable tr",2);
    formatNumber("#needTable tr",3);
    
    
    function formatNumber(tableId,tableIndex){
       $(tableId).each(function(row_index,row_element){
	       $(row_element).children().each(function(col_index,col_element){
	      		if(col_index == 2){
	      		     //表格1保留两位小数点
	      		     if(tableIndex == 1){
	      		        var number = $(col_element).text();
	      		        var num = poinTwo(number);
	      		        $(col_element).text(num);
	      		     }
	      		     //为需求增长最快表格添加%
	      		     else if(tableIndex == 3){
		                 //$(col_element).text("↑"+numberFormat($(col_element).text()+"%"));
		                 var number = $(col_element).text();
	      		         var num = poinTwo(number);
		                 var index = number.charAt(0);
		                 if(index == "-"){
		                    $(col_element).html('<td style="padding-left:12px;color:green"> &#8595 '+num+'%</td>');
		                 }else{
		                    $(col_element).html('<td style="padding-left:12px;color:red"> &#8593 '+num+'%</td>');		
		                 }               
		             }else{
		          
	      		         $(col_element).text(numberFormat($(col_element).text()));
		             
		             }
	      		
	      		}	      	      		
	       })
	    });
    }
    
//格式数字
function numberFormat(number){
    var numberStr = number.split(".",1);
    return numberStr;
}
//保留两位小数点
function poinTwo(number){
    return parseFloat(number).toFixed(2);
}

 
    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.echart.resize();
        });
    });
    
</script>
</html>